import React from 'react'
import clsx from 'clsx'
import useIsDark from '@/hooks/common/use-is-dark'

type LayoutProfileProps = {
  title: string | React.ReactNode
  children: React.ReactNode
}

export default function LayoutProfile({ title, children }: LayoutProfileProps) {
  const isDark = useIsDark()
  return (
    <div className={'cl-internal-1pr5xvn'}>
      <div
        className={clsx('cl-headerTitle 🔒️', {
          'cl-internal-10mwlbn': isDark,
          'cl-internal-190cjq9': !isDark
        })}
      >
        {title}
      </div>
      <div
        className={clsx('cl-profileSection flex-flow-revert', {
          'cl-internal-1vtf8dc': isDark,
          'cl-internal-1q1j6io': !isDark
        })}
      >
        {children}
      </div>
    </div>
  )
}
